<template>
  <el-row>
    <el-col :span="firstCol">
      <div class="custom-form-item">
        <label class="custom-label" :style="{ width: labelWidth + 'px' }">
          <slot name="label" />
        </label>
        <div class="custom-value">
          <slot name="value" />
        </div>
      </div>
    </el-col>
    <el-col :span="lastCol" v-if="firstCol === 12">
      <div class="custom-form-item">
        <label class="custom-label" :style="{ width: labelWidth + 'px' }">
          <slot name="label2" />
        </label>
        <div class="custom-value">
          <slot name="value2" />
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
interface Props {
  labelWidth?: number
  firstCol?: number
  lastCol?: number
}
withDefaults(defineProps<Props>(), {
  labelWidth: 120,
  firstCol: 12,
  lastCol: 12
})
</script>

<style scoped lang="scss">
.custom-form-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 18px;
}

.custom-label {
  display: inline-flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex: 0 0 auto;
  font-size: var(--el-form-label-font-size);
  color: var(--el-text-color-regular);
  height: 32px;
  line-height: 32px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}

.custom-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  line-height: 32px;
  position: relative;
  min-width: 0;
  :slotted(span) {
    white-space: normal;
  }
}
</style>
